import React from "react";
import { Form, Input, Select, Modal, Button, Radio } from "antd";
import { openNotificationWithIcon } from "utils/comm";

const { Option } = Select;
const { TextArea } = Input;
const RadioGroup = Radio.Group;

const formItemLayout1 = {
  labelCol: { span: 5 },
  wrapperCol: { span: 17 },
};
const formItemLayout2 = {
  labelCol: { span: 5 },
  wrapperCol: { span: 10 },
};

@Form.create()
class DealForm extends React.Component {
  constructor(props) {
    super(props);
    this.openNotificationWithIcon = openNotificationWithIcon.bind(this);
  }

  state = {
    value: 1,
  };

  handleOk = (e) => {
    if (e && e.preventDefault) e.preventDefault();
    const { value } = this.state;
    const { form, dispatch } = this.props;
    form.validateFields((err, values) => {
      if (err) {
        return;
      }
      // console.log(value)
      let type = "AppBusinessManagement/addApp";
      if (value === 2) {
        type = "AppBusinessManagement/addBusi";
      }
      if (values.appName) {
        values.appName = values.appName.trim();
        values.appCode = values.appCode.trim();
      } else {
        values.busiName = values.busiName.trim();
      }
      if (values.description) {
        values.description = values.description.trim();
      }
      const params = { ...values };
      dispatch({ type, payload: params }).then((data) => {
        const { errCode, errMsg } = data;
        if (errCode === 0) {
          this.handleCancel();
          dispatch({ type: "appListMenu/getAppListData" });
          form.resetFields();
        } else {
          this.openNotificationWithIcon("warning", "", errMsg || "操作失败");
        }
      });
    });
  };

  handleCancel = () => {
    const { handleCancel } = this.props;
    handleCancel(false);
  };

  formItem = (getFieldDecorator) => {
    const { value } = this.state;
    const { route } = this.props;
    let item = [];
    if (value === 1) {
      const { tenantList } = this.props;
      item = (
        <div>
          <Form.Item label="应用名称" {...formItemLayout1}>
            {getFieldDecorator("appName", {
              rules: [
                { required: true, message: "请输入应用名称" },
                { whitespace: true, message: "请输入应用名称" },
                { max: 20, message: "请不要超过20个字符" },
              ],
            })(<Input placeholder="请输入应用名称" />)}
          </Form.Item>
          <Form.Item label="应用编码" {...formItemLayout1}>
            {getFieldDecorator("appCode", {
              rules: [
                { required: true, message: "请输入应用编码" },
                { whitespace: true, message: "请输入应用编码" },
                { max: 20, message: "请不要超过20个字符" },
                {
                  pattern: /^[a-zA-Z_][a-zA-Z_0-9-]*$/,
                  message:
                    "支持字母、数字、下划线、中划线，须以字母或者下划线开头",
                },
              ],
            })(<Input placeholder="请输入应用编码" />)}
          </Form.Item>
          <Form.Item label="所属租户" {...formItemLayout2}>
            {getFieldDecorator("tenantId", {
              initialValue: route[0] || undefined,
              rules: [{ required: true, message: "请选择所属租户" }],
            })(
              <Select placeholder="请选择所属租户">
                {tenantList.map((selectItem) => (
                  <Option value={selectItem.id} key={selectItem.id}>
                    {selectItem.tenantName}
                  </Option>
                ))}
              </Select>,
            )}
          </Form.Item>
          <Form.Item label="应用说明" {...formItemLayout1}>
            {getFieldDecorator("description", {
              // initialValue: handleDetail.comment || '',
              // rules: [{ required: true, message: '请输入应用说明' }],
              rules: [{ max: 100, message: "请不要超过100个字符" }],
            })(<TextArea placeholder="请输入应用说明" rows={4} />)}
          </Form.Item>
        </div>
      );
    } else if (value === 2) {
      const { appList } = this.props;
      item = (
        <div>
          <Form.Item label="业务名称" {...formItemLayout1}>
            {getFieldDecorator("busiName", {
              rules: [
                { required: true, message: "请输入业务名称" },
                { whitespace: true, message: "请输入业务名称" },
                { max: 20, message: "请不要超过20个字符" },
              ],
            })(<Input placeholder="请输入业务名称" />)}
          </Form.Item>
          <Form.Item label="所属应用" {...formItemLayout2}>
            {getFieldDecorator("appId", {
              initialValue: route[1] || undefined,
              rules: [{ required: true, message: "请选择所属应用" }],
            })(
              <Select placeholder="请选择所属应用">
                {appList.map((selectItem) => (
                  <Option value={selectItem.id} key={selectItem.id}>
                    {selectItem.name}
                  </Option>
                ))}
              </Select>,
            )}
          </Form.Item>
          <Form.Item label="业务说明" {...formItemLayout1}>
            {getFieldDecorator("description", {
              // initialValue: handleDetail.comment || '',
              // rules: [{ required: true, message: '请输入业务说明' }],
              rules: [{ max: 100, message: "请不要超过100个字符" }],
            })(<TextArea placeholder="请输入业务说明" rows={4} />)}
          </Form.Item>
        </div>
      );
    }
    return item;
  };

  onRadioChange = (e) => {
    const { form } = this.props;
    form.resetFields();
    this.setState({
      value: e.target.value,
    });
  };

  renderFooter = (confirmLoading) => {
    return (
      <div>
        <Button style={{ marginRight: 10 }} onClick={this.handleCancel}>
          取消
        </Button>
        <Button
          loading={confirmLoading}
          type="primary"
          onClick={() => {
            this.handleOk();
          }}
        >
          提交
        </Button>
      </div>
    );
  };

  render() {
    const { form, visible, confirmLoading } = this.props;
    const { getFieldDecorator } = form;
    return (
      <Modal
        title="新建"
        visible={visible}
        onOk={this.handleOk}
        onCancel={this.handleCancel}
        footer={this.renderFooter(confirmLoading)}
        width="582px"
        centered
        confirmLoading={confirmLoading}
      >
        <Form>
          <Form.Item label="新建类型" {...formItemLayout1}>
            {getFieldDecorator("type", {
              rules: [{ required: true, message: "请选择新建类型" }],
              initialValue: 1,
            })(
              <RadioGroup onChange={this.onRadioChange}>
                <Radio value={1}>新建应用</Radio>
                <Radio value={2}>新建业务</Radio>
              </RadioGroup>,
            )}
          </Form.Item>
          {this.formItem(getFieldDecorator)}
        </Form>
      </Modal>
    );
  }
}
export default DealForm;
